import React, { memo, useState, useRef } from 'react';
import http from '@/services/request';
import {
  Card,
  Col,
  Form,
  Input,
  List,
  message,
  Modal,
  PageHeader,
  Row,
  Select
} from 'antd';
import DivWrapper from './style';
import { Axiosrepo } from './config';
import store from '@/pages/home/store';
import { action6, action7, action8 } from '@/pages/home/createAction';
import { useEffect } from 'react';
const { Option } = Select;


const OutStore = memo(() => {
  /*   const [dataSources, setDataSources] = useState([]); */

  //部分http请求封装在config
  const useAxios = Axiosrepo();
  const { repolist } = useAxios;
  useEffect(() => {
    /* http.get(`/server/outSlaughter/list/1/20`).then((res) => {
      setDataSources(res.data.records);
    }); */
  }, []);

  let repoOtions: any[] = [];
  repolist.forEach((i: { repoType: string }) => {
    switch (i.repoType) {
      case '辅料仓库': {
        if (repoOtions[0]) {
          repoOtions[0].push(i);
        } else repoOtions[0] = [i];
        break;
      }
      case '肉鸡速冻库': {
        if (repoOtions[1]) {
          repoOtions[1].push(i);
        } else repoOtions[1] = [i];
        break;
      }
      case '肉鸡冷藏库': {
        if (repoOtions[2]) {
          repoOtions[2].push(i);
        } else repoOtions[2] = [i];
        break;
      }
    }
  });

  //都是分库管理的代码
  const [isModalVisible, setIsModalVisible] = useState(false);
  const outQuantity = 500;
  const uref: any = useRef(null);
  //modal 仓库详情
  const [repoDetails, setRepoDetails] = useState([]);
  const showModal = (item: any) => {
    store.dispatch(action8(item.id));
    store.dispatch(action7(item.quantity));
    setIsModalVisible(true);
    http
      .get(`/server/repositorySlaughter/getStockListByRepoId/${item.id}`)
      .then((res) => {
        setRepoDetails(res.data);
      });

    setTimeout(() => {
      uref.current.setFieldsValue({
        productName: '',
        quantity: ''
      });
    }, 0);
  };
  const handleOk = () => {
    setIsModalVisible(false);
    const { quantity, productName } = uref.current.getFieldsValue();
    http
      .post(`/server/outSlaughter/exWareHouse`, {
        productId: Number(store.getState().key),
        quantity,
        productName,
        repoId: Number(store.getState().repoId)
      })
      .then((res) => { });
  };
  //返回退出modal
  const handleCancel = () => {
    setIsModalVisible(false);
  };
  return (
    <DivWrapper>
      <PageHeader
        className="site-page-header"
        title="出库操作"
        subTitle="请选择仓库进行查看或出库操作"
      />
      <div style={{ marginBottom: '50px' }}>
        <Row gutter={16}>
          {/* 渲染出三个仓库及对应的小仓库 */}
          {repoOtions.map((i: any) => {
            return (
              <Col span={8} key={i.id}>
                <Card
                  title={i.title}
                  bordered={true}
                  hoverable
                  size={'default'}
                  cover={
                    <img
                      alt="example"
                      src=""
                    />
                  }
                >
                  <List size="large">
                    {i.map((n: any) => {
                      return (
                        <List.Item>
                          <a
                            onClick={() => {
                              showModal(n);
                            }}
                          >
                            {n.repositoryName}
                          </a>
                        </List.Item>
                      );
                    })}
                  </List>
                </Card>
              </Col>
            );
          })}
        </Row>

        <Modal
          title={<b>仓库存储信息及出库操作管理</b>}
          visible={isModalVisible}
          onOk={handleOk}
          onCancel={handleCancel}
          style={{ width: '1200px' }}
          okText="确认出库"
          cancelText="取消并返回"
        >
          <Form
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            initialValues={{ remember: true }}
            autoComplete="off"
            ref={uref}
          >
            <List
              grid={{ gutter: 16, column: 2 }}
              dataSource={repoDetails}
              renderItem={(item: any) => (
                <List.Item>
                  <Card title={item.productName}>
                    <List>
                      产品id:<a>{item.productId}</a>
                    </List>
                    <List>
                      产品等级:<a>{item.grade}</a>
                    </List>
                    <List>
                      产品数量:<a>{item.quantity}</a>
                    </List>
                  </Card>
                </List.Item>
              )}
            />
            <Form.Item
              name="productName"
              wrapperCol={{ offset: 4, span: 12 }}
              label="选择出库产品"
            >
              <Select
                onChange={(e) => {
                  repoDetails.map(
                    // eslint-disable-next-line array-callback-return
                    (i: { productName: string; productId: string }) => {
                      if (i.productName === e) {
                        store.dispatch(action6(i.productId));
                      }
                    }
                  );
                }}
              >
                {repoDetails.map(
                  (i: {
                    productName: any;
                    productId: React.Key | null | undefined;
                    quantity: number;
                  }) => {
                    return (
                      <Option
                        value={i.productName}
                        key={i.productId}
                        children={null}
                      ></Option>
                    );
                  }
                )}
              </Select>
            </Form.Item>
            <Form.Item
              name="quantity"
              wrapperCol={{ offset: 4, span: 12 }}
              label="选择出库数量"
            >
              <Input
                defaultValue={outQuantity}
                onChange={(e) => {
                  if (
                    Number(e.target.value) < 0 ||
                    Number(e.target.value) > store.getState().quantity
                  ) {
                    message.error('超出该产品的数量！');
                  }
                }}
              ></Input>
            </Form.Item>
          </Form>
        </Modal>
      </div>
    </DivWrapper>
  );
});

export default OutStore;
